<script type="text/javascript">
    var countdown_count = {$wait_timeout};
    $(function() {
        generate();
    });
    {literal}
    function overlay_before_send(){
            var inner_div = $(document.createElement('div'));
            inner_div.addClass("before_lista_inner");

            var img = $(document.createElement('img'));
            img.attr('alt','loading');
            img.attr('src',{/literal}'{$STATIC_ROOT}{literal}images/loading_big.gif');
            inner_div.append(img);

            var message1_div = $(document.createElement('div'));
            var message1 = $(document.createElement('span'));
            message1.html("Aguarde enquanto são geradas as suas Grades...");
            message1_div.append(message1);
//            message1.css({"font-weight":"bold", "width":"100%"});
            inner_div.append(message1_div);
                
            var message2_div = $(document.createElement('div'));
            var message2 = $(document.createElement('span'));
            message2.html("Faltam ");
            message2_div.append(message2);
                
            var timer = $(document.createElement('span'));
            timer.attr("id","timer_count_down");
            timer.css({"font-weight":"bold", "color":"red"});
            message2_div.append(timer);
                
            var secs = $(document.createElement('span'));
            secs.html(" segundos");
            message2_div.append(secs);
                
//            message2.css({"font-weight":"bold", "width":"100%"});
            inner_div.append(message2_div);
                

            var pop = $(document.createElement('div'));
            pop.attr('id',"mkt_container");
            pop.addClass("before_lista_element");
            pop.addClass("before_lista_display");
            pop.css({"zIndex":"1002"});
            pop.append(inner_div);

            var fade = $(document.createElement('div'));
            fade.css({"zIndex":"1001"});
            fade.attr('class','overlay_backgroud');
            fade.addClass("before_lista_element");

            $(document.body).append(pop);
            $(document.body).append(fade);
            $(".overlay_backgroud").css({"width":$(document).width(),"height":$(document).height()});
                
            //timer functionalities
            countdown_timer(message2_div);
        }
    function countdown_timer(message2_div){
        $("#timer_count_down").html(countdown_count);
        countdown_count--;    
        var counter=setInterval(
                    function(){
                        if(countdown_count<0){
                            var wait_longer = $(document.createElement('span'));
                            wait_longer.html("Aguarde mais um pouco. Vc deu bastante trabalho para os servidores fazerem... =)");
                            message2_div.html(wait_longer);
                            if($("#grids_content").hasClass("loaded_ok")){
                                clearInterval(counter);
                                $('.before_lista_element').remove();    
                                window.location.replace("{/literal}{$URL_ROOT}grades/listar{literal}");
                                return;
                                }
                            }else{
                                $("#timer_count_down").html(countdown_count);
                                countdown_count--;
                            }
                        }, 1000);
    }
    {/literal}
    function generate(){
        overlay_before_send();
        $.ajax({
                url: URL_ROOT+"grades/generate",
                type: 'POST',
                beforeSend: function(){
                    },
                success: function(message){
//                    if(countdown_count<=0){
//                        $('.before_lista_element').remove();//remove loading message
//                        }
                     
//                     window.navigate('listar_grades');
//                    window.location.href("listar_grades");    
//                    $("#grids_content").html(message);
                    $("#grids_content").addClass("loaded_ok");
                    }
        });
        return false;
    }




</script>
<div id="grids_content">
</div>